<template>
	<view class="app">
		<z-paging
			show-refresher-update-time
			show-refresher-when-reload
			v-model="serviceList"
			ref="paging"
			:auto="false"
			@query="queryList"
		>
			<view
				class="top"
				slot="top"
				:style="'padding-top:calc(' + statusBarHeight + 'px + 16rpx)'"
			>
				<view class="address" @tap="jumpAddress">
					<u-icon name="map-fill" size="34"></u-icon>
					<text style="transform: translate(5%, -3%)">{{ address }}</text>
				</view>
				<view class="title">首页</view>
				<view style="flex: 1"></view>
			</view>
			<view slot="empty">
				<u-empty text="该地区暂无服务" mode="address" v-if="isLogin"></u-empty>
			</view>
			<view style="padding: 10rpx 20rpx 24rpx">
				<banner ref="banner" name="index"></banner>
			</view>
			<view class="tips">服务项目</view>
			<block v-for="item in serviceList" :key="item._id">
				<service-item :item="item"></service-item>
			</block>
		</z-paging>
		<view class="jump" @tap="vk.navigateTo('/pages/coupon/list')">
			<u-image
				width="134"
				height="122"
				src="@/static/home/ticket.png"
			></u-image>
			<view class="shadow"></view>
		</view>
	</view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
var vk = uni.vk // vk依赖
import banner from "./components/banner.vue"
import serviceItem from "./components/service-item.vue"

export default {
	components: { banner, serviceItem },
	data() {
		return {
			// 状态栏高度
			statusBarHeight: systemInfo.statusBarHeight,
			address: "合肥市",
			serviceList: [],

			flag: false,
			isLogin: false
		}
	},
	onLoad() {
		uni.$on("cityChange", item => {
			this.address = item
			if (this.$refs.paging) this.$refs.paging.reload()
		})
		this.$nextTick(() => {
			this.$refs.banner.init()
			this.checkAddress()
		})
	},
	methods: {
		// 地址
		checkAddress() {
			let isAdr = vk.getStorageSync("isAdr")
			if (!isAdr) {
				vk.confirm("需要获取当前位置已用于计算距离，请开启权限", r => {
					if (r.confirm) {
						this.startLocat()
					} else {
						vk.alert("未开启权限，将无法使用部分功能~")
						vk.setStorageSync("isAdr", true)
						this.$refs.paging.reload()
					}
				})
			} else {
				this.$refs.paging.reload()
			}
		},
		// 定位
		startLocat() {
			//#ifdef H5
			vk.showLoading("获取中...")
			uni.getLocation({
				type: "wgs84",
				success: async res => {
					vk.hideLoading()
					vk.setStorageSync("adr", [res.longitude, res.latitude])
					vk.callFunction({
						url: "client/pub.getH5City",
						title: "请求中...",
						data: {
							lonlat: [res.longitude, res.latitude]
						}
					}).then(res => {
						this.address = '合肥市'
						this.$refs.paging.reload()
						vk.setStorageSync("isAdr", true)
					})
				},
				fail: err => {
					vk.hideLoading()
					vk.alert("定位失败，请稍后重试~")
					this.$refs.paging.reload()
				}
			})
			//#endif
			//#ifdef MP
			vk.showLoading("获取中...")
			uni.getLocation({
				type: "wgs84",
				success: async res => {
					vk.hideLoading()
					vk.setStorageSync("adr", [res.longitude, res.latitude])
					vk.callFunction({
						url: "client/pub.getH5City",
						title: "请求中...",
						data: {
							lonlat: [res.longitude, res.latitude]
						}
					}).then(res => {
						this.address = res.city
						this.$refs.paging.reload()
						vk.setStorageSync("isAdr", true)
					})
				},
				fail: err => {
					vk.hideLoading()
					vk.alert("定位失败，请稍后重试~")
					this.$refs.paging.reload()
				}
			})
			//#endif
			//#ifdef APP-PLUS
			uni.getLocation({
				type: "gcj02",
				geocode: true,
				success: async res => {
					if (!res.address) {
						return vk.alert("定位失败，请稍后重试~")
					}
					vk.setStorageSync("adr", [res.longitude, res.latitude])
					this.address = res.address.city
					this.$refs.paging.reload()
					vk.setStorageSync("isAdr", true)
				},
				fail: () => {
					vk.alert("定位失败，请稍后重试~")
					this.$refs.paging.reload()
				}
			})
			//#endif
		},
		// 查询商品列表
		queryList(pageIndex, pageSize) {
			vk.callFunction({
				url: "client/pub.getProjectList",
				data: { pageSize, pageIndex, address: this.address }
			}).then(res => {
				if (res.open == -1) {
					this.flag = true
					this.$refs.paging.complete(false)
				} else {
					this.flag = false
					this.$refs.paging.complete(res.rows)
				}
			})
		},
		// 跳转地址
		jumpAddress() {
			uni.navigateTo({ url: `/pages/search/address?city=${this.address}` })
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 50px);
	/* #endif */
	background: linear-gradient(
			180deg,
			#3ab54a 0%,
			rgba(58, 181, 74, 0.37) 77%,
			rgba(58, 181, 74, 0.12) 86%,
			rgba(58, 181, 74, 0) 100%
		)
		#f5f5f5 no-repeat;
	background-size: 100% 496rpx;
}

.top {
	font-weight: 700;
	font-size: 32rpx;
	text-align: center;
	color: #ffffff;
	position: relative;
	padding: 20rpx;
	display: flex;
	align-items: center;
	.address {
		flex: 1;
		font-size: 30rpx;
		font-weight: 400;
		display: flex;
		align-items: baseline;
		.u-icon__icon {
			margin-right: 6rpx;
		}
	}
	.title {
		flex: 2;
	}
}

.tips {
	font-size: 30rpx;
	color: #333333;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	&::before {
		content: "";
		display: block;
		width: 6rpx;
		height: 26rpx;
		background: #3ab54a;
		border-radius: 3rpx;
		margin-right: 10rpx;
	}
}

.jump {
	position: fixed;
	bottom: 20rpx;
	/* #ifdef H5 */
	bottom: 120rpx;
	/* #endif */
	right: 6rpx;
	z-index: 999;
	display: flex;
	flex-direction: column;
	align-items: center;
	.u-image {
		margin-bottom: 4rpx;
		animation: move1 1s infinite alternate;
	}
	.shadow {
		width: 92rpx;
		height: 6rpx;
		background: #4e0000;
		border-radius: 50%;
		opacity: 0.6;
		filter: blur(4rpx);
		animation: move2 1s infinite alternate;
	}
}
@keyframes move1 {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-10rpx);
	}
}
@keyframes move2 {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.85);
	}
}
</style>
